<template>
	<view class="columnY container">
		<view class="login-center">
			<view class="pad-top-30 centerY centerX">
				<image class="logo" src="@/static/image/logo.png" mode=""></image>
			</view>
			<view class="radius20 form-box pad-30">
				<view class="text-center font-40 mar-bottom-40">微消防平台</view>
				<u--form class="mar-top-30" labelPosition="left" label-width="70" :model="userInfo" ref="form1">
					<u-form-item label="用户名" prop="username" borderBottom="true">
						<u--input type="text" clearable placeholderClass="input-style" placeholder="请输入登录用户名"
							v-model="userInfo.username" border="none"></u--input>
					</u-form-item>
					<u-form-item label="密码" prop="password" class="mar-top-40" borderBottom="true">
						<u-input clearable :type="showPassword ? 'text' :'password'" placeholderClass="input-style"
							placeholder="请输入密码" v-model="userInfo.password" border="none">
							<template #suffix>
								<u-icon color="#888888" size="20" class="icon" @click="changePassword"
									:name="showPassword ? 'eye-fill' : 'eye-off'"></u-icon>
							</template>
						</u-input>
					</u-form-item>
					<up-form-item label="姓名" class="mar-top-40" borderBottom="true">
						<u-input clearable type="text" placeholderClass="input-style" placeholder="请输入姓名"
							v-model="userInfo.name" border="none">
						</u-input>
					</up-form-item>
					<up-form-item @click="showSex = true" label="性别" class="mar-top-40" borderBottom="true">
						<view>{{userInfo.sexName}}</view>
						<template #right>
							<up-icon name="arrow-right"></up-icon>
						</template>
					</up-form-item>
					<u-form-item label="社会单位" prop="unit_name" class="mar-top-40" borderBottom="true">
						<u-input clearable type="text" placeholderClass="input-style" placeholder="请输入社会单位"
							v-model="userInfo.unit_name" border="none">
						</u-input>
					</u-form-item>
					<u-form-item label="身份证号" prop="card_no" class="mar-top-40" borderBottom="true">
						<u-input clearable type="text" placeholderClass="input-style" placeholder="请输入身份证号"
							v-model="userInfo.card_no" border="none">
						</u-input>
					</u-form-item>
					<u-form-item @click="is_city = true" label="注册地区" prop="region_id" class="mar-top-40"
						borderBottom="true">
						{{userInfo.regionName}}
						<up-picker :show="is_city" ref="uPickerRef" keyName="name" :columns="columns" @confirm="confirm"
							@change="changeHandler"></up-picker>
						<template #right>
							<up-icon name="arrow-right"></up-icon>
						</template>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view class="login-buttom pad-30">
			<u-button class="font-32 mar-top-10 bg-main" shape="circle" color="#edad14" @click="submit">注册</u-button>
		</view>

		<up-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</up-action-sheet>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import { toast} from '@/uni_modules/uview-plus'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// 接口引入
	import {
		region,
		register
	} from '/config/api.js';

	// 获取地址
	const columns = reactive([]);
	const is_city = ref(false);
	// 地址数据
	let city = reactive([])
	region().then(({
		data
	}) => {
		// 组装数组
		city = data;
		columns[0] = data;
		columns[1] = data[0].child;
	})

	// 切换数据
	const uPickerRef = ref(null)
	const changeHandler = (e) => {
		const {
			columnIndex,
			value,
			values,
			index,
		} = e;
		// 移动第一级
		if (columnIndex === 0) {
			uPickerRef.value.setColumnValues(1, city[index].child);
		}
	};

	// 确认选择地址
	const confirm = (e) => {
		let info = e.value;
		if (!info[0].id == 0) {
			userInfo.regionName = `${info[0].name} - ${info[1].name}`;
			userInfo.region_id = info[1].id;
		} else {
			userInfo.regionName = `${info[0].name}`;
			userInfo.region_id = info[0].id;
		}
		is_city.value = false;
	}

	// 注册提交数据
	let userInfo = reactive({
		username: '',
		password: '',
		sex: '',
		unit_name: '',
		code: 1234,
		sexName: '请选择性别',
		region_id: 0,
		regionName: '请选择地址'
	})

	//性别数据
	const showSex = ref(false);
	const actions = reactive([{
			name: '男',
			value: 1
		},
		{
			name: '女',
			value: 2
		}
	])

	// 确认选择性别
	const sexSelect = (e) => {
		userInfo.sexName = e.name;
		userInfo.sex = e.value;
	}

	// 注册
	const submit = () => {
		register(userInfo).then(res => {
			toast(res.msg);
		})
	}

	// 选择
	const hideKeyboard = () => {
		console.log(11)
	}

	// 跳转注册
	const hanldeRegister = () => {
		uni.navigateTo({
			url: '/pages/register/register'
		})
	}

	// 查看密码
	let showPassword = ref(false);
	const changePassword = () => {
		showPassword.value = !showPassword.value;
	}

	const hanldeChoice = () => {
		uni.navigateTo({
			url: '/pages/locale/locale'
		})
	}
</script>

<style scoped>
	.container {
		height: calc(100vh - 100rpx);
		position: relative;
	}

	.choice {
		position: fixed;
		right: 30rpx;
		top: 40rpx;
	}

	.login-center {
		flex-grow: 1;
		background: white;
	}

	.logo {
		width: 130rpx;
		height: 130rpx;
	}

	.form-box {
		position: relative;
		background: white;
	}

	.login-buttom {
		background: white;
	}
</style>